<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="/asset/example/favicon.ico" />
<title>商品管理</title>
<link href="/asset/themes/insdep/easyui.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">
<link href="/asset/themes/insdep/icon.css" rel="stylesheet" type="text/css">
<link href="/asset/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="/asset/jquery.min.js"></script>
<script src="/asset/jquery.easyui.min.js"></script>
<script src="/asset/themes/insdep/jquery.insdep-extend.min.js"></script>
<style type="text/css">
.layout-panel-west {
    border-right: 1px solid #c5c5c5;
}
</style>
</head>
<body>
    <table id="category_datagrid" style="height: 500px;">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="title:'编号',field:'id',width:110,sortable:false,align:'left'"></th>
                <th data-options="title:'名称',field:'name',width:110,sortable:false,align:'left'"></th>
                <th data-options="field:'button',width:180,fixed:true,align:'center',formatter:App.category.datagrid_buttons">操作</th>
            </tr>
        </thead>
    </table>
    <div id="category_toolbar" style="padding:2px 5px;">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="category_save_btn">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="category_delete_btn">删除选中</a>
        <span class="datagrid-btn-separator" style="vertical-align: middle; height: 25px;display:inline-block;float:none"></span>
    </div>
    <div id="category_save_dlg" class="easyui-dialog" title="新增" data-options="iconCls:'icon-add',cls:'dialog',modal:true,closed:true,buttons:'#category_save_buttons'" style="width:400px;height:90px;">
        <div style="padding:0px 60px 0px 60px">
            <form id="category_save_form" method="post">
                <table style="border-spacing:10px;">
                </table>
            </form>
        </div>
    </div>
    <div id="category_save_buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton button-default" id="category_save_confirm">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="category_save_cancel">取消</a>
    </div>
    <div id="category_update_dlg" class="easyui-dialog" title="修改" data-options="iconCls:'icon-edit',cls:'dialog',modal:true,closed:true,buttons:'#category_update_buttons'" style="width:400px;height:90px;">
        <div style="padding:0px 60px 0px 60px">
            <form id="category_update_form" method="post">
                <table style="border-spacing:10px;">
                </table>
            </form>
        </div>
    </div>
    <div id="category_update_buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton button-default" id="category_update_confirm">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="category_update_cancel">取消</a>
    </div>
    <script>
$.xpost = function(formid, url){
    return $.ajax(url, { method:"post", data:new FormData(document.getElementById(formid)), contentType:false, processData:null});
};
var App = window.App || {};
$(function() {
    
        App.category = (function(){
            return {
                "datagrid_buttons":function(value, row) {return "<a href='javascript:void(0)' data-id='"+row.id+"' class='button-edit oper'>修改</a> <a href='javascript:void(0)' data-id='"+row.id+"' class='button-delete oper'>删除</a>";}
            };
        }());

        
        // 新增逻辑--------begin
        $("#category_save_btn").click(function(){
            $("#category_save_dlg").dialog("open");
        });
        $("#category_save_confirm").click(function(){
            $.xpost("category_save_form", "/category/save").done(function(){
                $('#category_datagrid').datagrid("load");
                $("#category_save_dlg").dialog("close");
            });
        });
        $("#category_save_cancel").click(function(){
            $("#category_save_dlg").dialog("close");
        });
        // 新增逻辑--------end

        // 修改逻辑--------begin
        $("#category_update_confirm").click(function(){
            $.xpost("category_update_form", "/category/update").done(function(){
                $('#category_datagrid').datagrid("load");
                $("#category_update_dlg").dialog("close");
            });
        });
        $("#category_update_cancel").click(function(){
            $("#category_update_dlg").dialog("close");
        });
        // 修改逻辑--------end

        // 删除选中逻辑--------begin
        $("#category_delete_btn").click(function(){
            var rows = $('#category_datagrid').datagrid("getSelections");
            if(rows.length==0){
                $.messager.alert("删除", "请选中要删除的行!");
                return;
            }
            $.messager.confirm("删除", "确定要删除吗?", function(r){
                if(r) {
                    var ids = rows.map(r=>r.id).join(",");
                    $.get("/category/deleteByIds", {id:ids}).done(function(){
                        $('#category_datagrid').datagrid("load");
                    });
                }
            });
        });
        // 删除选中逻辑--------end

        // 编辑一对多关系--------begin
        // 编辑一对多关系--------end

        $('#category_datagrid').datagrid({
            cls : "theme-datagrid",
            pagination : true,
            fitColumns : true,
            fit:true,
            method:"get",
            toolbar: "#category_toolbar",
            url : '/category/datagrid',
            onLoadSuccess : function() {
                $('.button-edit.oper').linkbutton({
                    iconCls : 'icon-edit'
                }).click(function(){
                    var id = $(this).data("id");
                    $.get("/category/findById", {id:id}).done(function(json){
                        $("#category_update_form").form("load", json);
                        $("#category_update_dlg").dialog("open");
                    });
                });
                $('.button-delete.oper').linkbutton({
                    iconCls : 'icon-remove'
                }).click(function() {
                    var id = $(this).data("id");
                    $.messager.confirm("删除", "确定要删除吗?", function(r){
                        if(r) {
                            $.get("/category/deleteById", {id:id}).done(function(){
                                $('#category_datagrid').datagrid("load");
                            });
                        }
                    });
                });
            }
        });
    
});
    </script>
</body>
</html>